<template>
  <view class="cu-list menu-avatar" v-for="(item,index) in list" :key="index">
    <view class="cu-item">
      <view class="cu-avatar round lg"
            :style="'background-image:url('+prefix+item.fromAvatar+');'">
      </view>
      <view class="content">
        <view class="text-lg text-bold padding-tb-xs">
          {{ item.fromUsername }}
        </view>
        <view class="text-gray text-sm padding-tb-xs">
          {{ item.createTime }}
        </view>
      </view>
      <view class="action text-xxl text-black"  @click="likeCommentRoot(item)">
        <view v-if="item.isLike===1" class="cuIcon-appreciate text-orange">
          <text class="text-gray text-lg" v-if="item.likeCount"> {{ item.likeCount }}</text>
        </view>
        <view v-else class="cuIcon-appreciate">
          <text class="text-gray text-lg" v-if="item.likeCount"> {{ item.likeCount }}</text>
        </view>
      </view>
      <view class="action text-xxl text-black" v-if="canReply">
        <view class="cuIcon-comment" @click="clickReply(item,item)"></view>
      </view>
    </view>

    <view class="margin-left-sm padding-left text-black">
      <view class="margin-lr-sm padding-left padding-top padding-bottom-xs text-break-all">
        <text>
          {{ item.content }}
        </text>
      </view>
      <!--父 -->
      <view v-if="replyShow">
        <view class="solids padding radius-lg bg-gray" v-if="replyItem===item">
          <input placeholder="请输入回复内容" v-model="replyContent"
                 focus @confirm="addCommentReply"
                 confirm-type="send" @blur="replyShow=false">
        </view>
      </view>
      <view class="margin-left-lg margin-right padding-lr bg-gray radius-lg" v-if="item.commentReplyList">
        <view class="margin-tb-xs padding-top-sm solid-bottom" v-for="(it,id) in item.commentReplyList" :key="id">
          <view class="flex flex-sub justify-between">
            <view class="cu-avatar round df"
                  :style="'background-image:url('+prefix+item.fromAvatar+');'">
            </view>
            <view class="flex flex-sub flex-direction margin-left-xs">
              <view class="flex flex-sub justify-between align-center">
                <text class="text-sm text-blue">{{ it.fromUsername }}</text>
                <button class="cu-btn text-blue text-sm" v-if="canReply" @click="clickReply(item,it)">回复</button>
              </view>
              <text class="text-sm text-blue"> ▶ {{ it.toUsername }}：</text>
              <text class="margin-lr-sm padding-lf-xs padding-top padding-bottom-xs text-break-all ">{{ it.content }}</text>
              <text class="text-gray text-sm margin-tb-xs">
                {{ it.createTime }}
              </text>
              <!-- 子 -->
              <view v-if="replyShow">
                <view class="solids padding radius-lg bg-white" v-if="replyItem===it">
                  <input placeholder="请输入回复内容" v-model="replyContent"
                         focus @confirm="addCommentReply"
                         confirm-type="send" @blur="replyShow=false">
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {defineProps, ref} from "vue";
import api from "@/api";
import {useUserStore} from "@/store";

import {imagePathPrefix} from '/settings'

const prefix = imagePathPrefix
const userStore = useUserStore()
const props = defineProps({
  list: {
    type: Array,
    default: []
  },
  canReply: {
    type: Boolean,
    default: false,
  }
})

const replyShow = ref(false)
const replyItem = ref()
const replyRoot =ref()
const replyContent = ref('')


const clickReply = (item: any,it:any) => {
  replyShow.value = true
  replyRoot.value=item
  replyItem.value = it
}
/**
 * 赞评论
 * @param item
 */
const likeCommentRoot = (item: any) => {
  item.isLike = Math.abs(item.isLike - 1)
  if (item.isLike) {
    item.likeCount++;
  } else {
    item.likeCount--;
  }
  api.comment.likeCommentRoot({
    id: item.id,
    toUsername: item.fromUsername
  }).then(res => {
    uni.showToast({
      title: res.data.msg,
      icon: 'success'
    })
  })
}
/**
 * 回复
 */
const addCommentReply = () => {
  // 回复回复  回复评论
  let params ={
    rootId: replyItem.value.rootId || replyItem.value.id,
    fromUsername: userStore.userInfo.username,
    fromAvatar: userStore.userInfo.avatar,
    fromName: ' ',
    toUsername: replyItem.value.fromUsername,
    toName: replyItem.value.fromName,
    toAvatar: replyItem.value.fromAvatar,
    content: replyContent.value,
  }
  api.comment.createCommentReply(params).then(res => {
    if (res && res.data.code === 0) {
      uni.showToast({
        title: res.data.msg,
        icon: 'success',
        success: () => {
          console.log(replyRoot.value.commentReplyList)
          replyRoot.value.commentReplyList.unshift({
            ...params,
            createTime:'刚刚'
          })
          replyContent.value = ''
        }
      })
    }
  })
}
</script>

<style scoped>

</style>